<template>
  <el-row :gutter="20">
    <!-- 左 -->
    <el-col :span="14">
      <el-card shadow="never">
        <information :handler-summary="handlerSummary" />
        <binDetailsTable
          :table-columns="detailsColumns"
          :table-data="hardwareList"
          title="Hardware Bin Details"/>
        <binDetailsTable
          :table-columns="detailsColumns"
          :table-data="softBinList"
          title="Software Bin Details"/>
        <binDetailsTable
          :table-columns="summaryColumns"
          :table-data="summaryHistorys"
          title="Relevant Summary for this Lot"/>
      </el-card>
    </el-col>
    <!-- 右 -->
    <el-col :span="10">
      <el-card shadow="never">
        <showCard :show-info="handlerSummary" />
        <binSiteTable
          :list-infos="{IsHardBin:1,eqpId: this.$route.params.eqp1Id, eventId: this.$route.params.eventId}"
          title="Handware Bin Site"/>
        <binSiteTable
          :list-infos="{IsHardBin:0,eqpId: this.$route.params.eqp1Id, eventId: this.$route.params.eventId}"
          title="Software Bin Site"/>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import showCard from '../components/showCard'
import information from '../components/baseInformation'
import binDetailsTable from '../components/binDetailsTable'
import binSiteTable from '../components/binSiteTable'
// import summaryApi from '@/api/production/summaryReview'
export default {
  name: 'HandlerSummary',
  components: { information, showCard, binDetailsTable, binSiteTable },
  props: {
    summaryList: {
      type: Object,
      default: () => ({})
    },
    currentTab: {
      type: String,
      default: ''
    }
  },
  data() {
    const detailsColumns = [
      { prop: 'binNo', label: 'Bin' },
      { prop: 'binItem', label: 'Bin Description' },
      { prop: 'binType', label: 'Pass/Fail', templete: (_scope) => {
        return (
          <el-tag type={_scope.row.binType ? 'success' : 'danger'} effect='dark'>
            { _scope.row.binType ? 'Pass' : 'Fail' }</el-tag>
        )
      } },
      { prop: 'binQty', label: 'Bin Qty' }
    ]

    const summaryColumns = [
      { prop: 'systemTime', label: 'Time', width: '120', templete: (_scope) => {
        return (
          <el-link underline={false} type='primary'
            on-click={() => this.getCurrentSummary(_scope.row)}
          >{_scope.row.systemTime}</el-link>
        )
      } },
      { prop: 'trStep', label: 'Step' },
      { prop: 'testedQty', label: 'Total Qty' },
      { prop: 'passQty', label: 'Pass Qty' },
      { prop: 'trOperId', label: 'Operator ID' },
      { prop: 'startTime', label: 'Start Time' }
    ]
    return {
      detailsColumns: detailsColumns,
      summaryColumns: summaryColumns
      // handlerSummary: {},
      // summaryHistorys: [],
      // hardwareList: [],
      // softBinList: []
    }
  },
  computed: {
    handlerSummary: function() {
      return this.summaryList.handlerSummary
    },
    hardwareList: function() {
      return this.summaryList.handlerSummary.hardBinInfos
    },
    softBinList: function() {
      return this.summaryList.handlerSummary.softBinInfos
    },
    summaryHistorys: function() {
      return this.summaryList.summaryHistorys
    }
  },
  methods: {
    getCurrentSummary(row) {
      this.$router.push({
        name: 'SummaryReview',
        params: { eqp1Id: row.handlerId, eqp2Id: row.testerId, eventId: row.eventId }
      })
    }
  }
}
</script>

